<template>
  <div class="page">
    <ProTable :columns="columns" :request-api="getRolePage"></ProTable>
  </div>
</template>

<script lang="ts" setup>
import { h } from 'vue'
import { NButton, NSpace } from 'naive-ui'
import ProTable, { type ProTableProps } from '@/components/pro-table/index.vue'
import { getRolePage } from '@/api/sys/role'

const columns: ProTableProps['columns'] = [
  { title: '名称', key: 'name', width: 240 },
  { title: '标识', key: 'label', width: 240 },
  { title: '备注', key: 'remark', width: 240 },
  { title: '创建时间', key: 'createTime' },
  { title: '更新时间', key: 'updateTime' },
  {
    fixed: 'right',
    title: '操作',
    key: 'actions',
    width: 160,
    render: (row) => {
      console.log(row)
      return h(NSpace, null, {
        default: () => [
          h(NButton, { ghost: true, size: 'medium', type: 'primary' }, { default: () => '编辑' }),
          h(NButton, { ghost: true, size: 'medium', type: 'error' }, { default: () => '删除' })
        ]
      })
    }
  }
]
</script>
